<html>
<head>
	<title>First JSP</title>
    <!-- <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js" -->
   	<script>
    	dojoConfig= {
        	parseOnLoad: false,
        	async: false
    	};
	</script>
    <script src="dojo194/dojo/dojo/dojo.js">
    </script>
    <script src="common.js"></script>
    <link rel="stylesheet" href="dojo194/dojo/dijit/themes/claro/claro.css" />
	<link type="text/css" rel="stylesheet" href="css/style.css">    
	
	<script>	
		dojo.require("dijit.form.Button");
		dojo.require("dijit.form.TextBox");
		dojo.require("dijit.Tooltip");
		dojo.require("dojo.request");
		dojo.require("dijit.form.ValidationTextBox");

		var validUser = true;
		var validPassword = true;
		
		require(["dijit/dijit","dojo/domReady!"], function(dijit) {
			dojo.parser.parse();
			var buttonSubmit = dijit.byId("submit");
			var clearButton = dijit.byId("reset");
			
			var userText = dijit.byId("name");
			var checkbox = dijit.byId("ckeckLogged");
			var passText = dijit.byId("pass");
			
			dojo.connect(buttonSubmit, "onClick", function() {
				dojo.xhrPost({ 
				       url: "/mari/login", 
				       content: {'user': userText.textbox.value, 'pwd' : passText.textbox.value}, 
				       load: function(response) {
				    	 validUser = true;
				    	 validPassword = true;
				         if (response == "invalidUser") { 
		            		 validUser = false;
		            		 userText.validate();
				         } else if(response == "invalidPassword") {
		            		 validPassword = false;
		            		 passText.validate();
				         } else if(response == "fail") {
				        	 document.getElementById('errorMessage').innerHTML = "Error while trying to verify your account!";
				         } else { 
				           window.location.replace(response); 
				         } 
				       },
				       handleAs: "text" 
				     }); 

			});
			
			dojo.connect(clearButton, "onClick", function() {
				userText.textbox.value = "";
				passText.textbox.value = "";
				checkbox.focusNode.checked = false;
			});

		});
	    
	    
	    function validateUser(text) {
	    	return validUser;
	    }
	    
	    function validatedPassword(text) {
	    	return validPassword;
	    }
	    
	  </script>
</head>
<body background = "images/background.jpg" class="claro" style="padding:30px">
	<h2 align=center> Welcome! </h2>
	
	<div align= center>
		<table style="border: 1px solid #9f9f9f;" cellspacing="10">
				<tr>
					<td><label id="errorMessagePlace"></label></td>
				</tr>
				<tr>
					<td><label for="name">User:</label></td>
						<td>
					<input type="text"
						name="name"
						value="mari"
						id="name"
						dojoType="dijit.form.ValidationTextBox"
					 	required="true"
					 	promptMessage="Enter user name."
			   			invalidMessage="User name is invalid"
			   			validator=validateUser
					 />
				 </td>
				</tr>
				<tr>
					<td><label for="name">Password:</label></td>
					<td>
						<input type="password"
	    				name="pass"
	    				value="pass"
	    				id="pass"
	    				dojoType="dijit.form.ValidationTextBox"
	   				 	required="true"
	   				 	promptMessage="Enter password"
	        			invalidMessage="Invalid password"
	        			validator=validatedPassword
	   				 	/>
					</td>
				</tr>
				<tr>
					<td />
					<td>
						<div>
							<table>
								<tr>
									<td><input type="checkbox" id="ckeckLogged"
										data-dojo-type="dijit/form/CheckBox" /></td>
									<td><label for="ckeckLogged" class="checkbox">Keep
											me logged in!</label></td>
								</tr>
							</table>
						</div>
					</td>
				</tr>
			</table>

	<button data-dojo-type="dijit/form/Button" id="submit" type="button">Submit</button>
	<button data-dojo-type="dijit/form/Button" id="reset" type="button">Reset</button>
	<div id = "errorMessage" style = "color : red"></div>
</div>
</body>
</html>